import { useEffect } from "react";
import { Descriptions } from "antd";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import DependentedDatabases from "./DetailDatabase";
import ApplicationDetailTypes from "./DetailTypes";
import ApplicationDetailVersions from "./DetailVersions";

const ApplicationDetail = ({ item, reloadData }) => {
    const { remoteData } = useModel("global");

    const state = useReactive({
        typeLoading: false,
        applicationTypes: [],
        selectedType: null,
        typeVersions: [],
        versionLoading: false,
        object: {},
    });

    const loadApplicationTypes = async () => {
        state.typeLoading = true;
        let res = await remoteData({
            object: "bnt-application-resource-center-service",
            serviceName: "/developer/application/getTypes",
            params: { appUuid: item.appUuid },
        });
        state.applicationTypes = res || [];
        state.typeLoading = false;
    };

    useEffect(() => {
        if (item?.appUuid) {
            loadApplicationTypes();
        }
    }, [item]);

    return (
        <div>
            <Descriptions size="small" column={2} style={{ padding: "0 20px 1px 20px" }} labelStyle={{ color: "#999", width: 100, textAlign: "right" }}>
                <Descriptions.Item label="应用说明" span={2}>
                    {item.appDesc}
                </Descriptions.Item>
                <Descriptions.Item label="所属角色">{item.appRole || ""}</Descriptions.Item>
                <Descriptions.Item label="登录状态">{item.appLogin === "localLogined" ? "本地登录" : "远程登录"}</Descriptions.Item>
                <Descriptions.Item label="应用分类">{item.acName}</Descriptions.Item>
                <Descriptions.Item label="适用对象">{item.aoName}</Descriptions.Item>
                <Descriptions.Item label="开发者类型">{item.appSdty}</Descriptions.Item>
                <Descriptions.Item label="开发组织">
                    {item.Organization?.oiFuna} - {item.appSduu}
                </Descriptions.Item>
                <Descriptions.Item label="创建时间">{formatUTCTime(item.appCrti)}</Descriptions.Item>
                <Descriptions.Item label="更新时间">{formatUTCTime(item.appUpti)}</Descriptions.Item>
            </Descriptions>

            <DependentedDatabases application={item} reloadData={reloadData} />

            <div style={{ height: 10 }}></div>

            <ApplicationDetailTypes application={item} applicationTypes={state.applicationTypes} typeLoading={state.typeLoading} reloadData={loadApplicationTypes} />

            <div style={{ height: 10 }}></div>

            <ApplicationDetailVersions application={item} applicationTypes={state.applicationTypes} />
        </div>
    );
};

export default ApplicationDetail;
